<template>
	<div class="ts_view">
		<van-nav-bar :fiex="true" :border="false" title="团队设置" left-arrow @click-left="onClickLeft" />

		<div class="ts_item">
			<span>我的帐户</span>
			<span>{{TeamData.mobile}}</span>
		</div>

		<div class="ts_item">
			<span>我的等级</span>
			<div class="ts_mydj">
				<span>{{TeamData.level}}级会员</span>
				<img v-if="TeamData" :src="myApp.srcPath( TeamData.level + '.png','images/vip_ico')" alt="">
			</div>
		</div>

		<div class="ts_item">
			<span>对方帐户</span>
			<div class="ts_mydj">
				<input v-model="id" type="text" placeholder="请输入对方账户ID">
				<div class="ts_jt"></div>
			</div>
		</div>

		<div class="ts_item">
			<span>设置对方账户等级</span>
			<div class="ts_djSet" @click="showPicker = true">
				<span>{{value == '' ? 'V0-V' + (TeamData.level-1)  : value}}</span>
				<div class="ts_xjt"></div>
			</div>
		</div>

		<div class="t_qr" @click="TeamSetApi">确定</div>

		<van-popup v-model="showPicker" round position="bottom">
			<van-picker show-toolbar :columns="newColuns" @cancel="showPicker = false" @confirm="onConfirm" />
		</van-popup>

	</div>

</template>

<script>
	import Vue from 'vue';
	import {
		NavBar,
		Toast,
		Picker,
		Popup
	} from 'vant';

	Vue.use(NavBar);
	Vue.use(Picker);
	Vue.use(Popup);
	
	import {TeamSet,TeamSetApi} from "../serve/api.js"

	export default {
		created() {

			this.TeamSet()
	
		},
		data() {
			return {
				
				value: '',
				
				showPicker: false,
				
				columns: ['普通会员','一级会员', '二级会员', '三级会员', '四级会员', '五级会员','六级会员','七级会员','八级会员','九级会员'],
				
				newColuns:[],
				
				//默认展示数据
				TeamData:"",
				
				//用户输入id
				id:"",
				
				//设置的用户等级
				level:0
				
			}
		},

		methods: {
			
			//确认设置
			TeamSetApi(){
			
				if(this.id <= 0){
					
					Toast('请输入正确的用户id');
					
					return;
					
				}
			
				let params = {
					
					id:this.id,
					
					level: this.level
				}
				
				TeamSetApi(params, (res) => {
					
					Toast(res.data.msg);
					
					if(res.data.code == 1){
						
						this.id = ""
						
					}
					
				
				}, (error) => {
					
					Toast('设置失败');
					
				})
			
			},
			
			TeamSet(){
				
				let pramas;
				
				TeamSet( pramas , (res) => {
					
					// console.log(res)
					
					this.TeamData = res.data.data
					
					this.columns.forEach( (item,index) => {
						
						if(res.data.data.level > index){
						
							this.newColuns[index] = item
							
						}
						
					})
					
				}, (error) => {
					
				})
				
			},
			
			onConfirm(value) {
				
				this.value = value;
				
				// console.log(this.newColuns.indexOf(value))
				
				this.level = this.newColuns.indexOf(value)
				
				this.showPicker = false;

			},


			onClickLeft() {
				// Toast('返回');
				this.$router.go(-1)

			},
			onClickRight() {
				Toast('按钮');
			},
		},
	};
</script>

<style scoped="">
	.ts_xjt {
		/* height: 5px; */
		border: 0.1rem solid black;
		border-color: transparent transparent transparent #1D58FF;
		margin-left: .16rem;
	}

	.ts_djSet {
		position: relative;
		padding-left: .1rem;
		color: #1D58FF;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.78rem;
		height: .42rem;
		border: 1px solid rgba(29, 88, 255, 1);
		border-radius: .2rem;
	}

	.ts_item input {
		width: 2.4rem;
	}

	.ts_jt {
		width: 7px;
		height: 7px;
		border-top: 2px solid #B7B7B7;
		border-right: 2px solid #B7B7B7;
		transform: rotate(45deg);
	}

	.ts_view .ts_item:nth-child(3) {
		border-top: 1px solid rgba(0, 0, 0, 0.05);
		margin-top: 0;
	}

	.ts_mydj img {
		width: .3rem;
		height: .28rem;
		margin-left: .13rem;
	}

	.ts_mydj {
		display: flex;
		align-items: center;
	}

	.ts_item {
		margin-top: .18rem;
		padding: .27rem .5rem;
		box-sizing: border-box;
		font-size: .28rem;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.t_qr {
		width: 3.8rem;
		height: .66rem;
		background: rgba(29, 88, 255, 1);
		border-radius: .33rem;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: .32rem;
		margin-top: .94rem;
	}

	.ts_view {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: #FBFBFB;
	}
</style>
